<link rel="stylesheet" href="/cn/css/exerciseNew/readDetail.css?v=1.4">
<script type="text/javascript" src="/cn/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/cn/js/jq-ui.min.js"></script>
<script type="text/javascript" src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>

<section id="exerciseDetail">
    <!-- 顶部 -->
    <div class="headNav">
        <template>
            <div class="w12 headContent">
                <div class="headTitle">剑雅阅读 {{dataQuestion!=''?dataQuestion.article.name:''}}</div>
                <div class="clockTime">
                    <img src="/cn/images/exerciseNew/15@2x.png" alt="">
                    <span>{{time}}</span>
                </div>
                <div class="operateBtn">
                    <a href="/cn/exercise/read?category=all" class="upData">退出</a>
                    <a href="javascript:void(0)" class="upData" @click="processData">SUBMIT</a>
                    <img src="/cn/images/exerciseNew/16@2x.png" alt="" class="fullScreen"  @click="launchFullscreen">
                </div>
            </div>
        </template>
    </div>
    <input type="hidden" value="<?php echo $content_id?>" name="content_id" id="content_id">
    <!-- 做题部分 -->
    <div class="exerciseCenter">
        <!-- 文章 -->
        <div class="fullText">
            <a href="javascript:void(0)" class="original" @click="isOriginal = !isOriginal">{{isOriginal?'查看原文':'显示空白'}}</a>
            <div class="articleText" id="articleText">
                <div v-show="!isOriginal" v-html="dataQuestion!=''?dataQuestion.article.description:''"></div>
            </div>
        </div>
        <!-- 题目 -->
        <div class="subject">
            <p class="original">题目</p>
            <template>
                <div class="articleText" v-cloak  >
                    <div class="outDiv" v-for="(item,index) in dataQuestion.topic" :id="item.parent.numbering">
                        <!--单选题  numbering 7  是非判断题 numbering 3  都是单项选择题且表现形式一样-->
                        <div class="" v-if="item.parent.numbering == 7 || item.parent.numbering == 3">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="singleBox ItemIn" v-for="(itemSon,indexSon) in item.son" :id="'listen_'+ itemSon.content_id">
                                <div class="singleTitle">
                                    <div v-html="itemSon.article"></div>
                                    <img class="spin" src="/cn/images/exerciseNew/13@2x.png" alt="" @click="toggle($event)">
                                </div>
                                <div class="singleZt">
                                    <div class="singleCover" v-for="(itemSonDes,indexSonDes) in itemSon.description">
                                        <input :id="itemSon.id+'_'+indexSonDes" type="radio" class="radioBox" @change="getAnswer(index,itemSon.id,indexSon)"
                                               v-model="AnswerArry[index][indexSon].answer" :value="letterArry[indexSonDes]" @click="getDoNow(itemSon.content_id)">
                                        <label :for="itemSon.id+'_'+indexSonDes"><span style="margin-right: 5px;"></span>{{item.parent.numbering == 7?letterArry[indexSonDes]:''}}
                                            {{itemSonDes}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--多选题  1-->
                        <div class="" v-if="item.parent.numbering == 1">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
<!--                            <div class="quesArticle" v-html="item.parent.description"></div>-->
                            <div class="singleBox ItemIn" :id="'listen_'+ item.son[0].content_id">
                                <div class="singleTitle">
                                    <div v-html="item.son[0].article"></div>
                                    <img class="spin" src="/cn/images/exerciseNew/13@2x.png" alt="" @click="toggle($event)">
                                </div>
                                <div class="singleZt">
                                    <div class="singleCover" v-for="(itemSonDes,indexSonDes) in item.parent.sentenceNumber">
                                        <input :id="item.son[0].id+'_'+indexSonDes" type="checkbox" class="radioBox" @change="getAnswer(index,item.son[0].id,indexSonDes,item.parent.answerCount)"
                                               v-model="AnswerArry[index][0].answer" :value="letterArry[indexSonDes]"  @click="getDoNow(item.son[0].content_id)">
                                        <label :for="item.son[0].id+'_'+indexSonDes">
                                            <span style="margin-right: 5px;"></span>
                                            {{letterArry[indexSonDes]}}.<a v-html="itemSonDes"></a></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--填空  除开单选和打勾题 全部算填空  首先是正常的填空-->
                        <div class="" v-if="item.parent.numbering == 2">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesArticle tableCover" v-html="item.parent.article"></div>
<!--                            <div style="display: flex;flex-wrap: wrap;">-->
<!--                                <div class="artiOption" v-for="(itemSon,indexSon) in item.son">-->
<!--                                    <input type="text" :placeholder="itemSon.name" :id="'listen_'+ itemSon.content_id" class="BlankInput" v-model="AnswerArry[index][indexSon].answer" @change="getAnswer(index,itemSon.id,indexSon)" @click="getDoNow(itemSon.content_id)">-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                        <!--heading 题型  大纲拖拽-->
                        <div class="" v-if="item.parent.numbering == 8">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="artiOption" v-for="(itemSentence,indexSentence) in item.parent.sentenceNumber">
                                <p class="headSen">{{itemSentence}}</p>
                            </div>
                        </div>
                        <!--匹配 题型  打勾勾-->
                        <div class="" v-if="item.parent.numbering == 4">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="tickTable">
                                <div class="tickItem">
                                    <p class="tickText"></p>
                                    <div class="chooseText" v-for="(chooseLetter,chooseIndex) in item.parent.article">{{chooseLetter}}</div>
                                </div>
                                <div class="tickItem" v-for="(itemSon,indexSon) in item.son">
                                    <p class="tickText">{{itemSon.article}}</p>
                                    <div class="chooseText tickCover" v-for="(itemSonDes,indexSonDes) in item.parent.article">
                                        <input :id="itemSon.id+'_'+indexSonDes" type="radio" class="radioBox" @change="getAnswer(index,itemSon.id,indexSon)"
                                               v-model="AnswerArry[index][indexSon].answer" :value="letterArry[indexSonDes]" @click="getDoNow(itemSon.content_id)">
                                        <label :for="itemSon.id+'_'+indexSonDes"><span></span></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--图片 题型-->
                        <div class="" v-if="item.parent.numbering == 5">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesCnName">
                                <img :src="item.parent.image" alt="">
                            </div>
                            <div class="artiOption" v-for="(itemSon,indexSon) in item.son">
                                <input type="text" :placeholder="itemSon.name" :id="'listen_'+ itemSon.content_id" class="imgInput" v-model="AnswerArry[index][indexSon].answer" @change="getAnswer(index,itemSon.id,indexSon)" @click="getDoNow(itemSon.content_id)">
                            </div>
                        </div>
                        <!--选项拖拽 题型-->
                        <div class="" v-if="item.parent.numbering == 6">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesCnName" v-html="item.parent.article"></div>
                            <div class="artiOption" v-for="(itemSentence,indexSentence) in item.parent.sentenceNumber">
                                <p class="headSen">{{letterArry[indexSentence]}}. {{itemSentence}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

        </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footNav">
        <div class="footNavCover">
            <a href="javascript:void(0)" class="reviewBtn" @click="reviewStatus">
                REVIEW
                <div class="reviewPop">
                    不确定答案，可随 review，(先选择题 号再选中review后 题号会变成圆形)
                </div>
            </a>
            <div class="quesNumCover">
                <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                <a href="javascript:void(0)" :class="{'quesNum':index>-1, 'fulfil': item.isDo == 1, 'notSure': item.status == 1, 'doNow': index == current }" v-for="(item,index) in dataQuestion.question_list" @click="welter(item.pid,item.content_id,index,item.status)" @mouseover="followIn($event)" @mouseout="followOut($event)">{{index+1}}</a>
                <!-- 提示 跟随按钮位置-->
                <div class="quesPop" :style="{display:display,left:left}" v-cloak>
                    <p>白色：已答题</p>
                    <p>灰色：未答题</p>
                    <p>紫色：答题中</p>
                </div>
            </div>
            <div class="turnBtn">
                <a href="javascript:void(0)" class="prevBtn" @click="prev()"  v-show="current>0">
                    <img src="/cn/images/exerciseNew/18@2x.png" alt="">
                    <span>上一题</span>
                </a>
                <a href="javascript:void(0)" class="nextBtn" @click="next()"  v-show="dataQuestion!=''&&current<dataQuestion.question_list.length-1">
                    <img src="/cn/images/exerciseNew/19@2x.png" alt="">
                    <span>下一题</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 交卷弹窗 -->
    <div class="carryOut" v-if="confirmPop" v-cloak>
        <div class="carryContent">
            <div class="carryTitle">
                交卷
                <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeOut" @click="confirmPop = false">
            </div>
            <p class="carryTip">共有试题{{dataQuestion!=''?dataQuestion.question_list.length:''}}题，已做{{doLength}}题。您确定要交卷吗？</p>
            <div class="carryBtn">
                <a href="javascript:void(0)" class="confirmPaper" @click="submitText">确认交卷</a>
                <a href="javascript:void(0)" class="checkBtn" @click="confirmPop = false">再检查一下</a>
            </div>
        </div>
    </div>
</section>




<script src="/cn/js/exerciseNew/readDetail.js?v=1.5.5"></script>


